<template>
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item>响应命令</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <filterTitle @query="query" @reset="Reset" :formData="formData" :form="formInline" @node-click="deptChoose">
      </filterTitle>
      <LsdTable class="lsd-table" slot="gjxm" @select="handleSelectionChange" :paginationAtrrs="paginationAtrrs"
        @pageChange="handleSizeChange" :compRef="table.compRef" ref="gjxm" :columns="table.columns" :title="table.title"
        :actions="table.actions" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage"
        :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
    <emergencyResponseAdd :dialogVisible.sync="dialogVisible" @list="list" :type="type" :id="id" :judge_id="judge_id">
    </emergencyResponseAdd>
    <emergencyResponseApproval :visible.sync="visible" @list="list" :id="id"></emergencyResponseApproval>
    <LsdDialog @handleBtnX="handleBtnX" @handleBtnD="tzdPrint" :dialogConfig="previewVisibleConfig" @handleBtn="handleBtn"
      @close="close1">
      <emergencyResponsepreview slot="dialog" :previewVisible.sync="previewVisibleConfig.isShow" :id="id">
      </emergencyResponsepreview>
    </LsdDialog>
    <!-- <el-dialog title="响应命令单" :visible="previewVisible" width="60%" :before-close="previewhandleClose" class="preview">
    </el-dialog> -->

    <!-- 视频关联弹窗 -->
    <LsdDialog :dialogConfig="bdVideoDialog.dialogConfig" @handleBtn="handleBtn" @close="close1">
      <LsdDialogTitle slot="dialog" :titleConfig="bdVideoDialog.titleConfig" :activeNames="activeNames">
        <DialogForm ref="videoForm" slot="slot1" :formConfig="bdVideoDialog.formConfig" />
        <div slot="slot2">
          <DialogForm ref="videoForm1" :formConfig="bdVideoDialog.formConfig1" />
          <div class="flex videoDiv">
            <div><img src="@/assets/img/video.jpg" alt="" width="100%"></div>
            <div class="device">
              <div class="deviceMain">
                <div class="deviceTitle">视频资源列表</div>
                <div class="deviceSearch">
                  <el-input size="small" v-model="devicePlace" placeholder="" class="right">
                  </el-input>
                </div>
                <div class="videoTree">
                  <el-tree :props="props" :load="loadNode" lazy show-checkbox @check-change="handleCheckChange">
                  </el-tree>
                </div>
              </div>
            </div>
          </div>
          <LsdTable compRef="spmc" :columns="bdVideoDialog.formConfig1.table.columns"
            :tableData="bdVideoDialog.formConfig1.table.tableData" :tableAttr="bdVideoDialog.formConfig1.table.tableAttr"
            :isSequenceFlag="bdVideoDialog.formConfig1.table.isSequenceFlag" />
        </div>
      </LsdDialogTitle>
    </LsdDialog>

    <!-- 灾情查看弹窗 -->

    <el-dialog title="灾情信息查看" :visible.sync="disasterVisible" width="70%">
      <el-table :data="table1" border :header-cell-style="header_cell_style"
        :cell-style="{ borderColor: '#D7D7D7', fontSize: '16px' }" size="small">
        <el-table-column prop="emergencyEvent" label="应急事件" align="center" min-width="171">
        </el-table-column>
        <el-table-column prop="unitName" label="所属单位" align="center" min-width="171">
        </el-table-column>
        <el-table-column label="输电线路" align="center">
          <el-table-column label="500kV及以上" align="center">
            <el-table-column prop="sdxl500KvTrip" label="累计跳闸" align="center" min-width="100">
            </el-table-column>
            <el-table-column prop="sdxl500KvRecover" label="累计恢复" align="center" min-width="100">
            </el-table-column>
          </el-table-column>
          <el-table-column label="220kV" align="center">
            <el-table-column prop="sdxl220KvTrip" label="累计跳闸" align="center" min-width="100">
            </el-table-column>
            <el-table-column prop="sdxl220KvRecover" label="累计恢复" align="center" min-width="100">
            </el-table-column>
          </el-table-column>
          <el-table-column label="110kV" align="center">
            <el-table-column prop="sdxl110KvTrip" label="累计跳闸" align="center" min-width="100">
            </el-table-column>
            <el-table-column prop="sdxl110KvRecover" label="累计恢复" align="center" min-width="100">
            </el-table-column>
          </el-table-column>
          <el-table-column label="35kV" align="center">
            <el-table-column prop="sdxl35KvTrip" label="累计跳闸" align="center" min-width="100">
            </el-table-column>
            <el-table-column prop="sdxl35KvRecover" label="累计恢复" align="center" min-width="100">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column label="变电站" align="center">
          <el-table-column label="500kV及以上" align="center">
            <el-table-column prop="bdz500KvTrip" label="累计停运" align="center" min-width="100">
            </el-table-column>
            <el-table-column prop="bdz500KvRecover" label="累计恢复" align="center" min-width="100">
            </el-table-column>
          </el-table-column>
          <el-table-column label="220kV" align="center">
            <el-table-column prop="bdz220KvTrip" label="累计停运" align="center" min-width="100">
            </el-table-column>
            <el-table-column prop="bdz220KvRecover" label="累计恢复" align="center" min-width="100">
            </el-table-column>
          </el-table-column>
          <el-table-column label="110kV" align="center">
            <el-table-column prop="bdz110KvTrip" label="累计停运" align="center" min-width="100">
            </el-table-column>
            <el-table-column prop="bdz110KvRecover" label="累计恢复" align="center" min-width="100">
            </el-table-column>
          </el-table-column>
          <el-table-column plabel="35kV" align="center">
            <el-table-column prop="bdz35KvTrip" label="累计停运" align="center" min-width="100">
            </el-table-column>
            <el-table-column prop="bdz35KvRecover" label="累计恢复" align="center" min-width="100">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column label="配电线路" align="center">
          <el-table-column label="10kV" align="center">
            <el-table-column prop="pdxl10KvTrip" label="累计停运" align="center" min-width="100">
            </el-table-column>
            <el-table-column prop="pdxl10KvRecover" label="累计恢复" align="center" min-width="100">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column label="台区" align="center">
          <el-table-column prop="tqTrip" label="累计停电" align="center" min-width="100">
          </el-table-column>
          <el-table-column prop="tqRecover" label="累计恢复" align="center" min-width="100">
          </el-table-column>
          <el-table-column prop="tqRater" label="恢复率" align="center" min-width="100">
          </el-table-column>
        </el-table-column>
        <el-table-column label="用户" align="center">
          <el-table-column prop="ptyhTrip" label="累计停电" align="center" min-width="100">
          </el-table-column>
          <el-table-column prop="ptyhRecover" label="累计恢复" align="center" min-width="100">
          </el-table-column>
          <el-table-column prop="ptyhRater" label="恢复率" align="center" min-width="100">
          </el-table-column>
        </el-table-column>
        <el-table-column label="重要用户" align="center">
          <el-table-column prop="zyyhTrip" label="累计停电" align="center" min-width="100">
          </el-table-column>
          <el-table-column prop="zyyhRecover" label="累计恢复" align="center" min-width="100">
          </el-table-column>
          <el-table-column prop="zyyhRater" label="恢复率" align="center" min-width="100">
          </el-table-column>
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">

      </div>
    </el-dialog>
  </div>
</template>

<script>
import Printer from "@/utils/operationTicketPrint";
import emergencyResponseAdd from "./components/EmergencyResponseAdd.vue";
import emergencyResponseApproval from "./components/EmergencyResponseApproval.vue";
import emergencyResponsepreview from "./components/EmergencyResponsepreview.vue";
import {
  xymldSubmissionList, deletelist, getinfo, getDisasterList, doDownPdf
  // getOrgApi
} from "@/api/EmergencyDisposal/xymld";
import { getDictByGroupEmergency, getSubclassUntilList } from "@/api/common.js";
export default {
  name: "EmergencyResponselist",
  components: {
    emergencyResponseAdd,
    emergencyResponseApproval,
    emergencyResponsepreview
  },
  data() {
    return {
      id: "",
      type: {
        type: "新增",
        code: "add"
      },
      previewVisible: false,
      visible: false,
      dialogVisible: false,
      multipleSelection: [],
      total: 3,
      pageNum: 1,
      formInline: {
        eventCode: "",
        responseName: "",
        eventName: "",
        responseLvCode: "",
        effectTime: [],
        approvalDeptId: "",
        approvalDept: "",
        createTime: [],
        approvalStartTime: "",
        approvalEndTime: "",
        responseState: "",
        effectRange: ""
      },
      // 表格信息
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "响应命令列表",
        actions: [
          {
            id: "ListAdd",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "responseName",
            label: "响应命令单",
            align: "left",
            "min-width": "280px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      class='commonTableStyle'
                      style='width:100%'
                      {...{
                        on: {
                          click: () => {
                            this.operinfo(row);
                          }
                        }
                      }}
                    >
                      {row.responseName}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "eventName",
            label: "事件类别",
            align: "center"
          },
          {
            prop: "responseLvName",
            label: "响应级别",
            align: "center"
          },
          {
            prop: "effectRange",
            label: "影响范围",
            align: "left",
            "min-width": "100px"
          },
          {
            prop: "effectTime",
            label: "影响时间",
            align: "left",
            "min-width": "110px"
          },
          {
            prop: "linkman",
            label: "联系人",
            align: "center",
            "show-overflow-tooltip": true
          },
          {
            prop: "createDeptName",
            label: "发布单位",
            align: "left"
          },
          {
            prop: "zqxx",
            label: "灾情信息",
            align: "center",
            width: "100px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                      {...{
                        on: {
                          click: () => {
                            this.operDisaster(row);
                          }
                        }
                      }}
                    >
                      查看
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "createTime",
            label: "发布时间",
            align: "center",
            width: "200px"
          },
          {
            prop: "responseState",
            label: "状态",
            align: "center",
            "min-width": "80px",
            formatter: (row, column, cellValue, index) => {
              if (cellValue === "0") {
                return "编辑中";
              } else if (cellValue === "1") {
                return "待审批";
              } else if (cellValue === "2") {
                return "已发布";
              } else if (cellValue === "3") {
                return "已驳回";
              } else if (cellValue === "4") {
                return "终止";
              }
            }
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "300px",
            render: (h, scope) => {
              let arr = [];
              const userId = JSON.parse(sessionStorage.getItem("account")).id;
              const tbPower = this.common.isHasPower("tbr");
              // const spPower = this.common.isHasPower("spr");
              if (["0", "3"].includes(scope.row.responseState) && tbPower) {
                arr = ["编辑", "删除"];
              } else if (scope.row.responseState === "1" && scope.row.nextAssignee && scope.row.nextAssignee.includes(userId)) {
                arr = ["审批"];
              } else if (scope.row.responseState === "2" && scope.row.operate === true) {
                arr = ["预览", "成立指挥部", "调整", "视频资源配置"];
              } else if (scope.row.responseState === "2") {
                arr = ["预览"];
              }
              return (
                <div>
                  {
                    arr.map(item => {
                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 10px' {...{
                          on: {
                            click: () => {
                              this.actionHandle(item, scope);
                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div>
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      from: {
        dic_xymld: [],
        dic_sjlb: [],
        dic_xyjb: [],
        dic_fbsj: []
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
      },
      formData: [
        {
          elType: "input",
          id: "responseName",
          label: "响应命令单",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "select",
          id: "eventCode",
          label: "事件类别",
          dic: "dic_sjlb",
          attrs: {
            value: "",
            size: "small",
            clearable: true,

            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "select",
          id: "responseLvCode",
          label: "响应级别",
          dic: "dic_xyjb",
          attrs: {
            value: "",
            clearable: true,
            size: "small",
            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "input",
          id: "effectRange",
          label: "影响范围",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "dateTimePicker",
          id: "effectTime",
          label: "影响时间",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            type: "datetimerange",
            "start-placeholder": "开始日期",
            "end-placeholder": "结束日期",
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        },
        {
          elType: "lsdTree",
          id: "approvalDept",
          name: "approvalDeptId",
          label: "发布单位",
          treeRef: "treeRef",
          keyWord: "keyWord",
          commonClick: true,
          attrs: {
            value: "",
            clearable: true,
            filterable: false,
            "collapse-tags": true
          },
          options: {
            attrs: {
              value: ""
            }
          },
          treeData: {
            attrs: {
              data: []
            },
            props: {
              children: "children",
              label: "orgName",
              value: "id"
            }
          }
        },
        {
          elType: "dateTimePicker",
          id: "createTime",
          label: "发布时间",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            type: "datetimerange",
            "start-placeholder": "开始日期",
            "end-placeholder": "结束日期",
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        },
        {
          elType: "select",
          id: "responseState",
          label: "状态",
          attrs: {
            value: "",
            clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: [
            {
              label: "编辑中",
              value: "0"
            },
            {
              label: "待审批",
              value: "1"
            },
            {
              label: "已发布",
              value: "2"
            },
            { label: "驳回", value: "3" },
            { label: "终止", value: "4" }
          ]
        }
      ],
      tableData: [],
      judge_id: "", // 用于接收研判单传递研判单id
      responseState: "",
      activeNames: ["1", "2"], // 折叠面板默认展开列
      devicePlace: "",
      previewVisibleConfig: {
        title: "响应命令单详情",
        isShow: false, // 弹窗显示隐藏
        btnLists: []
      },
      bdVideoDialog: {
        // 弹窗信息
        dialogConfig: {
          title: "视频资源绑定",
          isShow: false, // 弹窗显示隐藏
          btnList: [
            {
              name: "保存",
              id: "save",
              type: "primary",
              size: "small"
            },
            {
              name: "取消",
              id: "close1",
              size: "small"
            }
          ]
        },
        // 折叠面板信息
        titleConfig: [
          {
            title: "基本信息",
            name: "1",
            slot: "slot1"
          },
          {
            title: "视频资源",
            name: "2",
            slot: "slot2"
          }
        ],
        // 弹窗表单信息
        formConfig: {
          formData: [
            {
              type: "input",
              label: "响应命令单",
              prop: "responseName",
              class: "sjgy",
              isDisabled: true,
              lableWidth: "146px"
            },
            {
              type: "input",
              label: "响应研判单",
              prop: "judgeName",
              dic: "judgeId",
              class: "sjgy",
              lableWidth: "146px",
              isShow: true,
              option: [],
              isDisabled: true
            },
            {
              type: "select",
              label: "事件类别",
              prop: "eventCode",
              name: "eventName",
              dic: "dic_sjlb",
              class: "half",
              isDisabled: true,
              lableWidth: "146px",
              option: []
            },
            {
              type: "input",
              label: "响应级别",
              prop: "responseLvName",
              class: "half",
              isDisabled: true,
              lableWidth: "146px"
            },
            {
              type: "input",
              label: "影响范围",
              prop: "effectRange",
              class: "half",
              isDisabled: true,
              lableWidth: "146px"
            },
            {
              type: "input",
              label: "影响时间",
              prop: "effectTime",
              class: "half",
              isDisabled: true,
              lableWidth: "146px"
            },
            {
              type: "textarea",
              label: "事件概要",
              isDisabled: true,
              prop: "incidentOutline",
              class: "sjgy",
              lableWidth: "146px"
            }
          ]
        },
        formConfig1: {
          formData: [
            {
              type: "select",
              label: "影响范围",
              prop: "emergencyEvent",
              name: "eventName",
              class: "half",
              lableWidth: "146px",
              option: []
            },
            {
              type: "select",
              label: "视频资源类别",
              prop: "eventCode",
              name: "eventName",
              dic: "dic_sjlb",
              class: "half",
              option: []
            }
          ],
          rules: {
            emergencyEvent: [
              { required: true, message: "请选择责任单位及部门", trigger: "change" }
            ],
            eventCode: [
              { required: true, message: "请选择责任人", trigger: "change" }
            ]
          },
          // 表格信息
          table: {
            compRef: "spmc",
            isSequenceFlag: true,
            isShowPage: true,
            resetFlag: true,
            loading: false,
            tableData: [
              {
                videoName: "奥园东路变-正大门围墙左侧1号布控球"
              }
            ],
            columns: [
              {
                prop: "videoName",
                label: "重点关注视频资源名称",
                align: "center",
                "min-width": "200px"
              },
              {
                prop: "cz",
                label: "操作",
                align: "center",
                fixed: "right",
                "min-width": "40px",
                render: (h, { $index }) => {
                  return (
                    <div>
                      <img
                        {...{
                          class: {},
                          style: {
                            width: "16px",
                            height: "16px",
                            cursor: "pointer"
                          },
                          attrs: {
                            src: require("../../../assets/img/listReduc.png")
                          },
                          on: {
                            click: () => {
                              this.bdVideoDialog.formConfig1.table.tableData.splice($index, 1);
                            }
                          }
                        }}
                      />
                    </div>
                  );
                }
              }
            ],
            tableAttr: {
              "max-height": "470px",
              stripe: false,
              border: true,
              fit: true,
              "show-header": true,
              "highlight-current-row": true,
              "cell-style": {
                "font-size": "16px"
              },
              "header-cell-style": {
                "text-align": "center",
                "background-color": "#B1C8F9",
                border: "1px solid #ccc",
                "font-size": "16px"
              }
            }
          }
        }
      },
      props: {
        label: "name",
        children: "zones"
      },
      count: 1,
      disasterVisible: false,
      table1: [],
      disasterTotal: 0,
      disasterPageNum: 1,
      header_cell_style: {
        textAlign: "center",
        backgroundColor: "#B1C8F9",
        border: "1px solid #ccc",
        fontSize: "16px",
        color: "#333"
      }

    };
  },
  watch: {
    "$route.query.eventState": {
      handler(eventState) {
        this.responseState = eventState || "";
        // this.formInline.responseState = eventState || "";
        this.list();
        // this.eventStateId = this.$route.query.eventState
        // // this.getDetail();
        // // 深度监听，同时也可监听到param参数变化
      },
      deep: true
    },
    dialogVisible(newVal) {
      if (!newVal) {
        this.judge_id = "";
      }
    }
  },
  computed: {
    getCreator() {
      const account = sessionStorage.getItem("account");
      const org = sessionStorage.getItem("org");
      const role = sessionStorage.getItem("role");
      const creator = {
        name: (account && JSON.parse(account).realName) || "",
        dept: (org && JSON.parse(org).orgName) || "",
        role: (role && JSON.parse(role)) || {},
        org: (org && JSON.parse(org)) || {}
      };
      return creator;
    }
  },
  created() {
    // 从响应研判单跳转新增
    const { judge_id, isAdd,
      // shengjiType,
      eventState } = this.$route.query;
    if (isAdd == 1 && judge_id) {
      this.judge_id = judge_id;
      this.type = {
        type: "新增",
        code: "add"
      };
      this.dialogVisible = true;
    }

    // if (shengjiType == 1) { // 省级
    //   this.formInline.approvalDept = "国网湖北省电力公司";
    //   this.formInline.approvalDeptId = "D4FA8CE2B4414C6FAD8B481A2595FF66";
    //   // this.formInline.approvalDept = this.getCreator.org.orgName;
    //   // this.formInline.approvalDeptId = this.getCreator.org.orgCode;
    // } else if (shengjiType == 2) { // 地市级
    //   this.formInline.approvalDept = this.getCreator.org.superiorDept;
    //   this.formInline.approvalDeptId = this.getCreator.org.superiorDeptId;
    // }

    this.responseState = eventState || "";
    // this.formInline.responseState = eventState || "";


    this.getOrg();
  },
  mounted() {
    this.list();
    this.getInputVal();
    // if (JSON.parse(sessionStorage.getItem("role")).roleCode === "hb_spr") {
    //   this.table.actions = [];
    // }
  },
  methods: {
    // 打印
    tzdPrint() {
      getinfo({ id: this.id }).then(res => {
        const readerFun = () => {
          const html = Printer.xymldPrinter(res);
          return html;
        };
        window.open("").document.write(Printer.printerOperationTicket(readerFun));

      });
    },
    // 下载
    handleBtnX() {
      doDownPdf({ id: this.id }).then(res => {
        const response = res; // 后端返回的数据流
        const filename = "响应命令单.pdf"; // 下载的文件名
        // 创建一个 Blob URL，指向数据流
        const blobUrl = URL.createObjectURL(response);
        // 创建一个链接元素
        const link = document.createElement("a");
        link.href = blobUrl;
        link.target = "_blank";
        link.download = filename;
        // 触发下载
        link.click();
        // 释放 Blob URL
        URL.revokeObjectURL(blobUrl);
      });

    },
    // 列表表格按钮事件
    actionHandle(item, scope) {
      if (item === "预览") {
        this.operpreview(scope.row);
      } else if (item === "成立指挥部") {
        this.goHeadquarters(scope.row);
      } else if (item === "调整") {
        this.adjustment(scope.row);
      } else if (item === "视频资源配置") {
        this.BindVideo(scope.row);
      } else if (item === "审批") {
        this.operApproval(scope.row);
      } else if (item === "编辑") {
        this.handleEdit(scope.row);
      } else if (item === "删除") {
        this.deletelist(scope.row);
      }
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: "region1" }, { name: "region2" }]);
      }
      if (node.level > 3) return resolve([]);

      var hasChild;
      if (node.data.name === "region1") {
        hasChild = true;
      } else if (node.data.name === "region2") {
        hasChild = false;
      } else {
        hasChild = Math.random() > 0.5;
      }

      setTimeout(() => {
        var data;
        if (hasChild) {
          data = [{
            name: "zone" + this.count++
          }, {
            name: "zone" + this.count++
          }];
        } else {
          data = [];
        }

        resolve(data);
      }, 500);
    },
    operDisaster(row) {
      // this.$router.push({
      //   path: "/DisasterInformationStatistics",
      //   query: {
      //     id: row.id
      //   }
      // });
      this.disasterVisible = true;
      getDisasterList({ eventIds: row.emergencyEventIds }).then(res => {
        this.table1 = res;
      });
    },
    adjustment(row) {
      this.$router.push({
        name: "EmeAdjustmentList",
        query: {
          id: row.id,
          type: 1
        }
      });
      // this.dialogVisible = true;
      // this.id = row.id;
      // this.type = {
      //   code: "adjustment",
      //   type: "调整"
      // };
    },
    query() {
      this.list();
    },
    Reset() {
      this.formInline = this.$options.data().formInline;
      // this.formInline.responseState = this.responseState;
      this.list();
    },
    handleEdit(row) {
      this.dialogVisible = true;
      this.id = row.id;
      this.type = {
        type: "编辑",
        code: "edit"
      };
    },
    // 列表删除
    deletelist(row) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deletelist({
          id: row.id
        }).then(data => {
          if (data) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.list();
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },

    goHeadquarters(row) {
      this.$router.push({
        path: "/Emheadquarterslist",
        query: {
          id: row.id
        }
      });
    },
    async list() {
      const parmas = {
        pageNum: this.paginationAtrrs["current-page"],
        pageSize: this.paginationAtrrs["page-size"],
        responseName: this.formInline.responseName,
        effectRange: this.formInline.effectRange,
        eventCode: this.formInline.eventCode.toString(),
        responseLvCode: this.formInline.responseLvCode,
        // createTime: this.formInline.createTime,
        approvalStartTime: this.formInline.createTime.length ? this.formInline.createTime[0] : "",
        approvalEndTime: this.formInline.createTime.length ? this.formInline.createTime[1] : "",
        responseState: this.formInline.responseState || this.responseState,
        effectStartTime: this.formInline.effectTime.length ? this.formInline.effectTime[0] : "",
        effectEndTime: this.formInline.effectTime.length ? this.formInline.effectTime[1] : "",
        createDeptId: this.formInline.approvalDeptId && this.formInline.approvalDept ? this.formInline.approvalDeptId : "",
        flowKey: "emergency_response_002"

      };
      const res = await xymldSubmissionList(parmas);
      this.tableData = res.data;
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
      this.total = res.total;
      this.pageNum = res.pageNum;
    },
    operpreview(row) {
      this.previewVisibleConfig.isShow = true;
      this.id = row.id;
    },
    operinfo(row) {
      this.$router.push({
        path: "/EmergencyResponseinfo",
        query: {
          id: row.id
        }
      });
    },
    operApproval(row) {
      this.visible = true;
      this.id = row.id;
    },
    // 抛出列表按钮
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法
    },
    ListAdd() {
      this.dialogVisible = true;
      this.type = {
        type: "新增",
        code: "add"
      };
    },
    // 分页
    handleSizeChange(val) {
      this.paginationAtrrs["current-page"] = val["current-page"];
      this.paginationAtrrs["page-size"] = val["page-size"];
      this.list();
    },
    // 多选单选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    ApprovalhandleClose() {
      this.visible = false;
    },
    previewhandleClose() {
      this.previewVisible = false;
    },
    // 获取下拉框数据
    getInputVal() {
      this.formData.forEach((item) => {
        if (item.dic) {
          getDictByGroupEmergency({ groupCode: item.dic }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: Number(item.dicCode)
              };
            });
            item.options = option;
          });
        }
      });
    },
    /* 获取组织机构 */
    async getOrg() {
      const unit = await getSubclassUntilList({ orgId: JSON.parse(sessionStorage.getItem("org")).orgId });
      /* 发布单位 */
      this.formData[5].treeData.attrs.data = unit;

      // this.formData[5].options = unit.map(item => {
      //   return {
      //     label: item.orgName,
      //     value: item.orgCode
      //   };
      // });
    },
    // 树状选择
    deptChoose(val, item) {
      this.$set(this.formInline, "approvalDept", val[0].orgName);
      this.$set(this.formInline, "approvalDeptId", val[0].id);
    },
    handleBtn(item) {
      this[item.id]();
    },
    BindVideo(row) {
      getinfo({ id: row.id }).then(res => {
        this.$refs.videoForm.form = res;
      });
      this.bdVideoDialog.dialogConfig.isShow = true;
    },
    close1() {
      this.bdVideoDialog.dialogConfig.isShow = false;
    },
    closeDisaster() {
      this.disasterVisible = false;
    },
    // 灾情信息弹窗分页
    handleDisasterChange(val) {
      this.disasterPageNum = val;
      // this.operDisaster();
    }
  }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/common.less";
@import "../../../assets/style/ComponentStyle.less";
@import "../../../assets/style/pop-upNotification.less";

:deep(.peizhi) {
  display: flex;

  .el-textarea__inner {
    min-height: 35px !important;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }

  .el-cascader {
    .el-input--small .el-input__inner {
      // height: 35px !important;
      line-height: 35px !important;
    }
  }
}

:deep(.el-tag.el-tag--info) {
  background-color: rgba(185, 206, 250) !important;
  color: #333333 !important;
  border-radius: 0px !important;
  height: 25px;
  font-size: 15px !important;
  border: none !important;
}

:deep(.el-dialog) {
  height: auto !important;
}

:deep(.preview .el-dialog__body) {
  height: 85%;
}

.EmergencyList :deep(.el-breadcrumb__inner.is-link) {
  font-weight: 400;
  color: #fff;
}

.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: rgb(251 211 89);
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover) {
  color: rgb(251 211 89);
}

:deep(.el-dialog__title) {
  font-weight: bold;
}

.box {
  // width: 100%;
  // height: 80vh;
  // padding: 0;
  // margin: 0;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

:deep(.el-cascader) {
  width: 100%;
}

:deep(.el-cascader .el-tag__close.el-icon-close) {
  background: none;
  font-size: 18px;
  color: #909399;
  margin-bottom: 8px;
}

:deep(.el-select .el-tag__close.el-icon-close) {
  background: none;
  font-size: 18px;
  margin-bottom: 8px;
}

:deep(.el-select .el-tag.el-tag--info .el-tag__close:hover) {
  color: #909399;
}

.videoDiv {
  justify-content: space-between;
  width: 100%;
  height: 420px;

  > :first-child {
    width: 56%;
  }

  .device {
    width: 43%;
    height: 100%;

    .deviceMain {
      width: 99%;
      height: 413px;
      border: 2px solid #3270ff;
      border-radius: 4px;
      overflow: hidden;
      background-color: rgba(213, 240, 255, 0.2);

      .deviceTitle {
        height: 31px;
        line-height: 31px;
        letter-spacing: 1px;
        font-size: 18px;
        font-weight: bold;
        padding-left: 15px;
        color: #d5f0ff;
        background-color: rgba(38, 92, 255, 0.45);
      }

      .deviceSearch {
        width: 93%;
        margin: 10px auto;

        :deep(.el-input__inner) {
          height: 35px;
          background-color: rgba(13, 38, 82, 0.58);
          border: 2px solid #008dff;
          color: #ccc;
        }
      }

      .videoTree {
        height: 330px;
        margin: 0 3.5%;
        overflow-y: auto;
      }

      :deep(.el-tree) {
        background: transparent;

        .el-tree-node:focus>.el-tree-node__content {
          background-color: transparent;
        }

        .el-tree-node__content:hover {
          background-color: transparent;
        }

        .el-tree-node__label {
          font-weight: bold;
          color: #008dff;
        }

        .el-tree-node__content {
          height: 42px;
          border-bottom: 1px solid #f2f2f2;
        }
      }
    }
  }
}

:deep(.el-dialog) {
  height: 70% !important;
  margin-top: 22vh !important;

  div::-webkit-scrollbar {
    height: 10px;
  }
}
</style>
